<template>
  <div 
    class="responsive-container"
    :class="[
      breakpoint, 
      { 
        'is-mobile': isMobileDevice,
        'is-desktop': !isMobileDevice
      }
    ]"
  >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { isMobile } from '../utils/mobile';

// 断点定义
type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

const breakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1400
};

const breakpoint = ref<Breakpoint>('md');
const windowWidth = ref(0);
const isMobileDevice = ref(false);

// 根据窗口宽度确定当前断点
const determineBreakpoint = () => {
  windowWidth.value = window.innerWidth;
  
  if (windowWidth.value < breakpoints.sm) {
    breakpoint.value = 'xs';
  } else if (windowWidth.value < breakpoints.md) {
    breakpoint.value = 'sm';
  } else if (windowWidth.value < breakpoints.lg) {
    breakpoint.value = 'md';
  } else if (windowWidth.value < breakpoints.xl) {
    breakpoint.value = 'lg';
  } else if (windowWidth.value < breakpoints.xxl) {
    breakpoint.value = 'xl';
  } else {
    breakpoint.value = 'xxl';
  }
};

// 检查是否为移动设备
const checkDevice = () => {
  isMobileDevice.value = isMobile();
};

// 计算属性：是否是小屏幕
const isSmallScreen = computed(() => {
  return ['xs', 'sm'].includes(breakpoint.value);
});

// 生命周期钩子
onMounted(() => {
  checkDevice();
  determineBreakpoint();
  window.addEventListener('resize', determineBreakpoint);
});

onUnmounted(() => {
  window.removeEventListener('resize', determineBreakpoint);
});

// 暴露给父组件的属性
defineExpose({
  breakpoint,
  isMobileDevice,
  isSmallScreen
});
</script>

<style scoped>
.responsive-container {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 响应式布局 */
.xs {
  max-width: 100%;
  padding: 0 1rem;
}

.sm {
  max-width: 540px;
  padding: 0 1rem;
}

.md {
  max-width: 720px;
  padding: 0 1.5rem;
}

.lg {
  max-width: 960px;
  padding: 0 1.5rem;
}

.xl {
  max-width: 1140px;
  padding: 0 2rem;
}

.xxl {
  max-width: 1320px;
  padding: 0 2rem;
}

/* 移动设备时全宽 */
.is-mobile {
  padding: 0 0.75rem;
}

/* 桌面设备的特定样式 */
.is-desktop {
  /* 可以添加桌面特有的样式 */
}
</style> 